<template>
    <view class="container">
        <!-- 药品组合名称 -->
        <view class="header">
            <text class="group-name">{{this.groupName}}</text>
        </view>

        <!-- 药品详情列表 -->
        <view class="medicine-list">
            <block v-for="(medicine, index) in this.groupStore.categoryDetail" :key="medicine.id">
                <view 
                    class="medicine-box"
                    :class="{'last-item': index === medicines.length - 1}"
                >
                    <view class="medicine-header">
                        <uni-icons type="pills" size="24" color="#2ac2d1"></uni-icons>
                        <text class="medicine-name">{{medicine.drugName}}</text>
                    </view>
                    <view class="medicine-image">
                        <image :src="medicine.picture"
                            mode="aspectFill" 
                            class="image"
                        ></image>
                    </view>
                    <view class="medicine-info">
                        <view class="info-item">
                            <text class="text">剂量: {{medicine.drugName}}</text>
                        </view>
                        <view class="info-item">
                            <text class="text">自定义剂量: {{medicine.customDosage}}</text>
                        </view>
                        <view class="info-item">
                            <uni-icons type="clock" size="18" color="#999"></uni-icons>
                            <text class="text">服用次数: {{medicine.frequency}}</text>
                        </view>
                        <view class="info-grid">
                            <view class="grid-item">
                                <text class="label">生产日期</text>
                                <text class="value">{{truncateAlarmTime(medicine.updateTime) }}</text>
                            </view>
                            <view class="grid-item">
                                <text class="label">过期日期</text>
                                <text class="value">{{truncateAlarmTime(medicine.uselessTime)}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
  import { useGroupStore } from '@/store/group';
  const groupStore = useGroupStore();
export default {
  setup() {
      return {
          groupStore
      };
  },
  onLoad(options) {
    this.groupName = options.name
    this.groupStore.getDetail(options.id)
  },
    data() {
        return {
            groupName: '',
            medicines: [
            ]
        }
    },
    methods:{
      truncateAlarmTime(time) {
          return time ? time.substring(0, 10) : '';
      },
    }
}
</script>

<style lang="scss">
.container {
    padding: 30rpx 20rpx;
    min-height: 100vh;
    background: #f8fafc;
}

.header {
    padding: 20rpx 0 30rpx;
    position: relative;
    margin-bottom: 20rpx;
    text-align: center;

    .group-name {
        font-size: 44rpx;
        color: #2d3748;
        font-weight: 600;
        letter-spacing: 1rpx;
    }
}

.medicine-list {
    .medicine-box {
        background: #ffffff;
        border-radius: 24rpx;
        padding: 30rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 8rpx 30rpx rgba(42, 194, 209, 0.08);
        transition: transform 0.2s;
        
        &:active {
            transform: scale(0.98);
        }

        .medicine-header {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;

            .medicine-name {
                font-size: 36rpx;
                color: #2d3748;
                font-weight: 500;
                margin-left: 16rpx;
            }
        }

        .medicine-image {
            margin-bottom: 30rpx;
            border-radius: 16rpx;
            overflow: hidden;
            
            .image {
                width: 100%;
                height: 300rpx;
                display: block;
                background: linear-gradient(45deg, #f0fdfa, #f8fafc);
            }
        }

        .medicine-info {
            .info-item {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f1f5f9;

                .text {
                    font-size: 28rpx;
                    color: #64748b;
                    margin-left: 12rpx;
                }
            }

            .info-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20rpx;
                margin-top: 30rpx;

                .grid-item {
                    background: #f8fafc;
                    border-radius: 12rpx;
                    padding: 24rpx;
                    
                    .label {
                        font-size: 24rpx;
                        color: #94a3b8;
                        display: block;
                        margin-bottom: 8rpx;
                    }
                    
                    .value {
                        font-size: 28rpx;
                        color: #475569;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .last-item {
        margin-bottom: 120rpx;
    }
}
</style>